<template>
  <div>
    <div class="rightHead" v-if="$route.name != '登录'">
      <div style="margin:0 0 0 25px;font-size:15px;padding-top:10px;color:#707070;">
        <div class="flex-row">
          <div
            :class="item.isCurrent?'item2':'item'"
            class="flex-center flex-row"
            v-for="(item,index) in historyList"
            :key="item+index"
            @click="jump(item.fullPath)"
          >
            <div class="circle" v-if="item.isCurrent"></div>
            {{item.name}}
            <div class="xx" @click.stop="del(item)">x</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      historyList: [], // 历史记录堆栈
    };
  },
  created() {
    if (this.historyList.length == 0) {
      this.pushPath(this.$router.history.current);
    }
    this.$router.afterEach((to, from) => {
      console.log("333", to, from);
      this.pushPath(to);
      //   if (router.isBack) {
      //     // 后退
      //     this.popList();
      //     // router.isBack = false;
      //     // router.transitionName = "route-back";
      //   } else {
      //     this.push(to.path);
      //     // router.transitionName = "route-forward";
      //   }
    });
  },
  methods: {
    jump(adress, query) {
      this.$router.push({ path: adress, query: query });
    },
    install(Vue) {
      // 提供Vue插件所需安装方法
      Object.defineProperty(Vue.prototype, "$routerHistory", {
        get() {
          return History;
        },
      });
    },
    //当前页面设置高亮
    isCurrent() {
      var a = this.historyList;
      a.map((res, index) => {
        // console.log(this.$router);
        if (res.path == this.$router.history.current.path) {
          a[index].isCurrent = true;
        } else {
          a[index].isCurrent = false;
        }
      });
    },
    del(item) {
      var a = this.historyList;
      a.map((res, index) => {
        if (res.path == item.path) {
          //   console.log(this.$router);
          a.splice(index, 1);
          if (a.length != 0) {
            this.jump(a[a.length - 1].fullPath);
          } else {
            this.jump('/person/backlog')
          }
        }
      });
    },
    // 入栈
    pushPath(item) {
      var a = this.historyList;
      var isHave = false; //判断该页面是否存在
      a.map((res, index) => {
        if (res.path == item.path) {
          a[index].isCurrent = true;
          isHave = true;
        } else {
          a[index].isCurrent = false;
        }
      });
      if (!isHave) {
        this.historyList.push({
          path: item.path,
          fullPath: item.fullPath,
          name: item.name,
          isCurrent: false,
        });
        this.isCurrent();
      }

      if (a.length > 6) {
        //最多储存6个历史记录
        a.splice(0, 1);
      }
    },
    popList() {
      this.historyList.pop(); //删除并返回最后一个
    },
    canBack() {
      return this.historyList.length > 1;
    },
  },
};
</script>
<style  scoped>
.circle {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  margin-right: 10px;
}

.item {
  height: 35px;
  padding: 0 15px;
  border: 2px solid rgba(231, 234, 239, 1);
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  position: relative;
  margin-right: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.item2 {
  height: 35px;
  padding: 0 15px;
  background: #70acea;

  font-size: 14px;
  color: #fff;
  position: relative;
  margin-right: 10px;
  cursor: pointer;
}
.xx {
  margin-left: 22px;
}
</style>